import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity,
  PixelRatio, Image, FlatList, ScrollView
} from "react-native";
import { NavigationEvents } from 'react-navigation';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common.js';
import StorageHelper from '../../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../../config/storage';
import WarningService from '../../../warning/_common/service';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import { RefuseModal } from '../../../../component/ModalVerifylComponent.js';
import { ProgressModal } from '../../../../components/common/ProgressModal';
import { CommonDialog } from '../../../../components/common/Dialog';
import OrderDetailsService from '../../../order-new/details/_common/service';
import OrderApproveService from '../_common/service';
import ModalPicDelComponent from '../../../../component/ModalPicDelComponent';
import HTTP from '../../../../utils/http'
import { API, API_GENERATE } from '../../../../config/api';
import Echarts from 'native-echarts';
import moment from 'moment';
import { CURRENCY } from '../../../../utils/helper';
import ToastUtil from '../../../../utils/toast';

const arrowIcon = require('../../../../imgs/sanjiao3.png');

const scale = GLOBAL.SCALE;
const TAB = [
  {
    name: '申请信息',
    id: 0, // TODO
  }, {
    name: '产品组占比',
    id: 1, // TODO
  }, {
    name: '产品线占比',
    id: 2, // TODO
  }
]
const modalPicDelCfg = {
  visible: false,
  uri: null,
  delPress: () => { },
  picPress: () => { }
}

export class ApproveApplyPage extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerTitle: '付款申请审批',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../../imgs/goBackEmpty.png')} />),
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        borderBottomWidth: 0,
        backgroundColor: style.color.themeColor
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  };
  constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
    console.log(this.params, '99')
    let { choice } = this.params || {};
    this.state = {
      tabIndex: 0,
      modalVisibles: false,
      refreshIcon: false,
      status: 'data',
      listData: [],
      options: [],
      previewModalVisible: false,
      choice: choice || {},
      choiceArr: [
      ],
      listDatass: [{
      }],
      lightBoxData: {
        modalVisible: false,
        onClosePress: this._closeLightBox,
        title: '',
        rowDataList: [],
        status: 'data',
        refreshIcon: false,
      },
    }
    this.pageNo = 1;
    this.totalPage = 1;
    this.reload = true;
    this.pageParams = { // TODO
      searchKey: '',
      pageNo: 1,
      pageSize: 10,
      paymentApplyId: this.params.paymentApplyId,
      paymentApplySource: this.params.paymentApplySource
    };
    modalPicDelCfg.picPress = () => {
      modalPicDelCfg.visible = false;
      modalPicDelCfg.uri = null;
      this.setState({
        previewModalVisible: false,
      });
    }
  }
  async componentWillMount () {
    await this._initPage();
    this._detailsData();
  }

  // 初始化数据
  _initPage = async () => {
    this.setState({
      status: this.reload ? 'loading' : 'data',
      refreshIcon: !this.reload,
    })
    let res = await HTTP.POST(API_GENERATE(API.PAY_APPROVEL_DETAIL), this.params)
    // console.log(res, '--res--', 'shenpi')

    if (res) {
      // if (res.applyItemList && res.applyItemList.length <= 20) {
      // } else {
      //   res.applyItemList = res.applyItemList.splice(0, 20)
      // }
      this.setState({
        status: res ? 'data' : 'empty',
        listData: res,
        listDatas: res.applyItemList,
        refreshIcon: false
      })
    } else {
      this.setState({
        refreshIcon: false,
        status: 'error'
      })
    }
  }


  _detailsData = async () => {
    let res = await HTTP.POST(API_GENERATE(API.PAY_APPROVEL_DETAIL_LIST), this.pageParams);
    console.log('res-列表', res)
    if (res) {
      this.totalPage = res.totalPage;
      this.setState({
        listDatas: this.pageParams.pageNo == '1' ? res.rows : this.state.listDatas.concat(res.rows),
      })
    }

  }

  // 产品组占比
  _applyBizTeam = async () => {
    this.setState({
      status: this.reload ? 'loading' : 'data',
      refreshIcon: !this.reload,
    })
    let res = await HTTP.POST(API_GENERATE(API.PAY_MENT_APPLY_BIZTEAM), this.params)
    if (res) {
      if (res && res.applyStatsList) {
        res.applyStatsList.forEach((item) => {
          delete item.teamId;
          item['value'] = item.applyAmount;
          delete item.applyAmount;
          item['name'] = item.teamName;
          delete item.teamName;
        })
      }
      // this.totalPage = res.totalPage;
      this.setState({
        status: res.applyStatsList && res.applyStatsList.length > 0 ? 'data' : 'empty',
        listDatass: res,
        refreshIcon: false
      })
    } else {
      this.setState({
        refreshIcon: false,
        status: 'error'
      })
    }
  }
  // 产品线占比
  _applyBizLine = async () => {
    this.setState({
      status: this.reload ? 'loading' : 'data',
      refreshIcon: !this.reload,
    })
    let res = await HTTP.POST(API_GENERATE(API.PAY_MENT_APPLY_BIZLINE), this.params)
    // console.log(res, '--res--')
    if (res) {
      if (res && res.applyStatsList) {
        res.applyStatsList.forEach((item) => {
          delete item.teamId;
          item['value'] = item.applyAmount;
          delete item.applyAmount;
          item['name'] = item.teamName;
          delete item.teamName;
        })
      }
      this.setState({
        status: res.applyStatsList && res.applyStatsList.length > 0 ? 'data' : 'empty',
        listDatass: res,
        refreshIcon: false
      })
    } else {
      this.setState({
        refreshIcon: false,
        status: 'error'
      })
    }
  }

  //切换
  _tabFn = (tabIndex) => {
    // this.reload = true;
    this.pageParams.pageNo = 1;
    if (tabIndex && tabIndex == 1) {
      this.setState({
        tabIndex,
      }, () => {
        this._applyBizTeam();
      })
    } else if (tabIndex && tabIndex == 2) {
      this.setState({
        tabIndex,
      }, () => {
        this._applyBizLine();
      })
    } else {
      this.setState({
        tabIndex,
      }, () => {
        this._initPage();
        this._detailsData();
      })
    }
  }
  // 刷新页面
  _onErrorRefresh = () => {
    this.pageParams.pageNo = 1;
    this.reload = true;
    this._initPage();
  }
  // 下拉刷新
  refresh () {
    this.pageParams.pageNo = 1;
    this.reload = false;
    this._detailsData();
  }

  // 上拉翻页
  loadMore () {
    if (this.totalPage > this.pageParams.pageNo) {
      this.pageParams.pageNo++;
      this.reload = false;
      this._detailsData();
    }
  }

  // 审批
  approve = async () => {
    const { listData, tabIndex } = this.state;
    // if (this.requesting) return;
    this.setState({ showRejectModal: false, });
    // this.requesting = true;
    let requestParams = {
      businessKey: this.params.businessKey,
      formKey: this.params.formKey,
      taskId: this.params.taskId,
      auditResult: this.auditResult,
      remark: this.remark,
    };
    let text = this.auditResult ? '同意' : '驳回';
    this.setState({ status: 'loading' });
    let res = await HTTP.POST(API_GENERATE(API.PAY_APPLY_APPROVEL), requestParams);
    // this.requesting = false;
    if (res) {
      ToastUtil.showSuccess(`${text}成功`).then(() => {
        this.props.navigation.navigate('ApproveApplyList', {
        })
      })
    } else {
      this.setState({
        status: 'data'
      })
    }
  }
  // 审批流
  _getCheckApprove = async () => {
    let { listData } = this.state;
    // this.setState({ status: 'loading' })
    //查询审批节点
    let responseData1 = await OrderDetailsService.checkApproval(this.params.paymentApplyId, '13', listData.processInstanceId, this.params.corpId);
    // console.log(responseData1, '99888888')
    responseData1 = responseData1 && responseData1.map((item) => {
      if (item.auditResult == 9) {
        item.auditResultName = '操作';
      }
      return item;
    })
    let { lightBoxData } = this.state;
    lightBoxData.modalVisible = true;
    lightBoxData.title = '审批状态';
    lightBoxData.rowDataList = responseData1;
    this.setState({
      lightBoxData,
      status: 'data'
    })
  }

  _closeLightBox = () => {
    let { lightBoxData } = this.state;
    lightBoxData.modalVisible = false;
    this.setState({ lightBoxData });
  }
  // 获取Echarts数据
  _getEcharts (listData) {
    let option = {
      backgroundColor: '#fff',
      legend: {
        orient: 'vertical',
        width: 100,
        left: 100,
        top: 260,
        data: [],
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '55%'],
          // center: ['50%', '35%'],
          color: ['#FF777A', '#9C7CFE', '#03AFF1', '#FEB70F', '#84D2C0', 'red', 'blue',],
          labelLine: {
            normal: {
              length: 18,
              length2: 7,
              lineStyle: {
                // color: '#ccc',
              },
            }
          },
          avoidLabelOverlap: false,
          label: {
            normal: {
              formatter: '{d}%',
              position: 'outer',
            },
            padding: [0, 7],
            rich: {

              abg: {
                backgroundColor: '#333',
                width: '100%',
                align: 'right',
                height: 22,
                borderRadius: [4, 4, 0, 0]
              },
              hr: {
                borderColor: '#aaa',
                width: '100%',
                borderWidth: 0.5,
                height: 0,
              },
              b: {
                fontSize: 16,
                lineHeight: 33
              },
              per: {
                color: '#eee',
                backgroundColor: '#334455',
                // padding: [0, 4],
              }
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 1.5,
              borderColor: '#fff',
            }
          },
          // color: ['#61a0a8', '#eee'],
          data: listData,
        }
      ]
    };

    return option;
  }

  _renderApprove = (item) => {
    let { listData } = this.state
    return (
      <View>
        <View style={styles.flexWhole}>
          <View style={styles.flexWholeName}>
            <Text style={styles.flexWholeTitle} onPress={() => { this._getCheckApprove() }}>审批流</Text>
          </View>
          <View style={styles.itemDayTime}>
            <Text style={[styles.consent,]} onPress={() => {
              this.auditResult = 1;
              this.remark = '';
              this.setState({
                showRejectModal: true,
                listData,
              })
              // this.consentCreate(item)
            }}>同意</Text>
            <Text style={styles.itemdown} onPress={() => {
              if (listData) {
                this.auditResult = 0;
                this.remark = '';
                this.setState({
                  showRejectModal: true,
                  listData
                })
              } else {
                ToastUtil.showWarning('没有数据')
              }
            }}>驳回</Text>
          </View>
        </View>
      </View>

    )
  }
  // 跳详情
  GoOrderDetails = (item) => {
    this.props.navigation.navigate('OrderDetailsPage', {
      orderId: item.orderId
    })
  }

  // 列表
  _renderListItem = (item, listData) => {

    return (
      <View>
        <View style={styles.flexList}>
          <View style={styles.flexListItem}>
            <Text style={styles.flexListItemName}>单据号</Text>
            <Text style={styles.flexMeber}>{item.sourceCode || '--'}</Text>
          </View>

          <View style={styles.flexListApply}>
            {item && listData.paymentApplySource != 'TK' ? (
              <View>
                <Text style={styles.flexListApplyText}>本次申请金额</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyVaule]}>{(item.applyAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item.fundTypeName ? (
              <View>
                <Text style={styles.flexListApplyText}>款项类型</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyType]}>{item.fundTypeName || '--'}</Text>
              </View>
            ) : null
            }

            <TouchableOpacity onPress={() => { this.GoOrderDetails(item) }}>
              <Text style={styles.flexListApplyText}>订单号</Text>
              <Text style={[styles.flexApplyMenbers, styles.flexListApplyNum]}>{item.orderId || '--'}</Text>
            </TouchableOpacity>

            {item && listData.paymentApplySource == 'FTF' ? (
              <View>
                <Text style={styles.flexListApplyText}>增值税金额</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyType]}>{(item.vatAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && listData.paymentApplySource == 'FTF' ? (
              <View>
                <Text style={styles.flexListApplyText}>关税金额</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyType]}>{(item.tariffAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && listData.paymentApplySource == 'FTF' ? (
              <View>
                <Text style={styles.flexListApplyText}>报关单号</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyType]}>{item.customsDeclarationNumber || '--'}</Text>
              </View>
            ) : null
            }
            {item && listData.paymentApplySource == 'DD' ? (
              <View>
                <Text style={styles.flexListApplyText}>付款类型</Text>
                <Text style={[styles.flexListApplyMenber,]}>{item.orderPayTypeName || '--'}</Text>
              </View>
            ) : null
            }
            {item && listData.paymentApplySource == 'DD' || item && listData.paymentApplySource == 'FP' ? (
              <View>
                <Text style={styles.flexListApplyText}>订单总额</Text>
                <Text style={[styles.flexListApplyMenber,]}>{(item.orderAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && listData.paymentApplySource == 'DD' || item && listData.paymentApplySource == 'FP' || item && listData.paymentApplySource == 'RK' ? (
              <View>
                <Text style={styles.flexListApplyText}>已付款全额</Text>
                <Text style={[styles.flexListApplyMenber,]}>{(item.payReceiptAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && listData.paymentApplySource == 'DD' || item && listData.paymentApplySource == 'FP' || item && listData.paymentApplySource == 'RK' ? (
              <View>
                <Text style={styles.flexListApplyText}>已申请未付款金额</Text>
                <Text style={[styles.flexListApplyMenber,]}>{(item.appliedAndNonPayment || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && listData.paymentApplySource == 'DD' || item && listData.paymentApplySource == 'RK' ? (
              <View>
                <Text style={styles.flexListApplyText}>合同剩余未付款金额</Text>
                <Text style={[styles.flexListApplyMenber,]}>{(item.contractLimitAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && listData.paymentApplySource == 'FP' ? (
              <View>
                <Text style={styles.flexListApplyText}>付款期限</Text>
                <Text style={[styles.flexListApplyMenber]}>{item.payExpireDays || '--'}天</Text>
              </View>
            ) : null
            }

          </View>
        </View>
      </View>
    )
  }


  async preview (fileId) {
    const imgData = await OrderApproveService.preview({ fileId });
    // console.log(imgData, '8899888', fileId)
    if (imgData && imgData.image) {
      let { image } = imgData;
      if (image && image.length) {
        modalPicDelCfg.visible = true;
        modalPicDelCfg.delTextHide = true; //隐藏删除
        modalPicDelCfg.uri = image;
        modalPicDelCfg.attachmentModalStyle = { backgroundColor: 'rgba(0,0,0,0)' };
        this.setState({
          previewModalVisible: true
        });
      }
    }
  }

  // 备注
  _renderToastWrap = () => {
    let { listData } = this.state;
    return (
      <View>
        <View style={styles.textRow}>
          <Text style={styles.textRowText}>{listData.remark || '--'}</Text>
        </View>
      </View>
    )
  }

  render () {
    let { tabIndex, listData, status, refreshIcon, showRejectModal, listDatas, listDatass, lightBoxData, modalVisibles } = this.state
    let bgColor = ['#FF777A', '#9C7CFE', '#03AFF1', '#FEB70F', '#84D2C0', 'red', 'blue',];
    return (
      <View style={styles.container}>
        <View style={styles.flexBusiness}>
          <Text style={styles.flexBusinessName}>{listData.companyName}</Text>
        </View>
        <View style={styles.flexBox}>
          <Text style={styles.flexTitle}>申请金额: {(listData.paymentApplyAmount || 0).toFixed(2)}{listData.currencyName || '元'}</Text>
          <Text style={styles.flexTitle}>计划付款日: {listData.planPayDate ? moment(listData.planPayDate).format('YYYY-MM-DD') : '--'}</Text>
        </View>
        <View style={styles.flexApply}>
          <Text style={styles.flexTitle}>申请来源: {listData.paymentApplySourceName || '--'}</Text>
          <Text style={styles.flexTitle}>付款方式: {listData.payTypeName || '--'}</Text>
        </View>
        <View style={[styles.flexBusiness, styles.flexAccount]}>
          <Text style={styles.flexBusinessName}>收款账号: </Text>
          <Text style={styles.flexBusinessText}>{listData.openBankName || '--'} | {listData.openAcctNo || '--'}{listData.openAcctNo || '--'}</Text>
        </View>
        <View style={styles.headBox}>
          {TAB.map((items, index) => {
            return (
              <View key={index}>
                <Text onPress={() => { this._tabFn(index) }} style={[styles.tabItems, tabIndex == index ? styles.tabItemActive : null]}>{items.name}
                </Text>
                {tabIndex == index ? (
                  <Text style={{
                    height: 2 * scale, backgroundColor: '#0E7FFD', flexDirection: 'row', paddingLeft: 3 * scale,
                    paddingRight: 3 * scale,
                  }}>
                  </Text>
                ) : null
                }
              </View>
            )
          })
          }
        </View>
        {tabIndex == 0 && status == 'data' ? (
          <ScrollView>
            <View style={styles.flexItem}>
              <View style={styles.flexContent}>
                <Text style={styles.flexItemTexe}>申请单号</Text>
                <Text style={styles.flexItemVaule}>{listData.paymentApplyCode || '--'}</Text>
              </View>
              {listData && listData.paymentApplySource == 'TK' ? (
                <View style={styles.flexContent}>
                  <Text style={styles.flexItemTexe}>客户余额</Text>
                  <Text style={styles.flexItemVaule}>{CURRENCY.getUnit(listData.currency).label || '¥'}{(listData.companyBanlanceAmount || 0).toFixed(2)}{CURRENCY.getUnit(listData.currency).text || '人民币'}</Text>
                </View>
              ) : null
              }
              {listData && listData.paymentApplySource == 'TK' ? (
                <View style={styles.flexContent}>
                  <Text style={styles.flexItemTexe}>已申请未付款金额</Text>
                  <Text style={styles.flexItemVaule}>{CURRENCY.getUnit(listData.currency).label || '¥'}{(listData.appliedAndNonPayment || 0).toFixed(2)}{CURRENCY.getUnit(listData.currency).text || '人民币'}</Text>
                </View>
              ) : null
              }
              {listData && listData.paymentApplySource == 'TK' ? (
                <View style={styles.flexContent}>
                  <Text style={styles.flexItemTexe}>可退金额</Text>
                  <Text style={styles.flexItemVaule}>{CURRENCY.getUnit(listData.currency).label || '¥'}{(listData.refundableAmount || 0).toFixed(2)}{CURRENCY.getUnit(listData.currency).text || '人民币'}</Text>
                </View>
              ) : null
              }
              {listData && listData.paymentApplySource == 'TK' ? (
                <View style={styles.flexContent}>
                  <Text style={styles.flexItemTexe}>退款业务员</Text>
                  <Text style={styles.flexItemVaule}>{listData.businessStaffName || '--'}</Text>
                </View>
              ) : null
              }
              {listData && listData.paymentApplySource == 'DD' ? (
                <View style={styles.flexContent}>
                  <Text style={styles.flexItemTexe}>授信余额</Text>
                  <Text style={styles.flexItemVaule}>{CURRENCY.getUnit(listData.currency).label || '¥'}{(listData.creditLimitAmount || 0).toFixed(2)}{CURRENCY.getUnit(listData.currency).text || '人民币'}</Text>
                </View>
              ) : null
              }
              {listData && listData.paymentApplySource == 'DD' ? (
                <View style={styles.flexContent}>
                  <Text style={styles.flexItemTexe}>授信总额</Text>
                  <Text style={styles.flexItemVaule}>{CURRENCY.getUnit(listData.currency).label || '¥'}{(listData.creditApplyAmount || 0).toFixed(2)}{CURRENCY.getUnit(listData.currency).text || '人民币'}</Text>
                </View>
              ) : null
              }

              <View style={styles.flexContent}>
                <Text style={styles.flexItemTexe}>申请人</Text>
                <Text style={styles.flexItemVaule}>{listData.staffName}</Text>
              </View>
              <View style={styles.flexContent}>
                <Text style={styles.flexItemTexe}>申请时间</Text>
                <Text style={styles.flexItemVaule}>{listData.paymentApplyDate ? moment(listData.paymentApplyDate).format('YYYY-MM-DD') : '--'}</Text>
              </View>
              <View style={styles.flexContent}>
                <Text style={styles.flexItemTexe}>币种</Text>
                <Text style={styles.flexItemVaule}>{listData.currencyName || '元'}</Text>
              </View>
              <View style={styles.flexContent}>
                <Text style={styles.flexItemTexe}>业务组织</Text>
                <Text style={styles.flexItemVaule}>{listData.corpName || '--'}</Text>
              </View>
              {listData && listData.paymentApplySource == 'TK' ? (
                <View style={styles.flexContent}>
                  <Text style={styles.flexItemTexe}>产品组</Text>
                  <Text style={styles.flexItemVaule}>--</Text>
                </View>
              ) : <View style={styles.flexContent}>
                  <Text style={styles.flexItemTexe}>产品组</Text>
                  <Text style={styles.flexItemVaule}>{listData.bizTeamName || '--'}</Text>
                </View>
              }
              <View style={styles.flexContentText}>
                <Text style={styles.flexItemTexe}>附件</Text>
                {listData.attachmentFileVOs && listData.attachmentFileVOs.length > 0 ? (
                  <View style={styles.flexItemFid}>
                    {listData && listData.attachmentFileVOs.map((item, index) => {
                      if (item.fileId && item.fileExtName) {
                        return (
                          <Text key={index} style={[styles.flexItemExt, { color: '#0091FF' }]} onPress={() => {
                            if (item.fileExtName === 'PDF') {
                              const { navigate } = this.props.navigation;
                              navigate('ContractPdfPage', { finalFileId: item.fileId, title: '附件信息' });
                            } else if (item.fileExtName === 'JPG' || item.fileExtName === 'PNG' || item.fileExtName === 'JPEG' || item.fileExtName === 'BMP') {
                              this.preview(item.fileId);
                            } else {
                              ToastUtil.showInfo(`抱歉，暂不支持${item.fileExtName}文件类型的预览～`)
                            }
                          }}>{('查看附件' + (index + 1))}</Text>
                        )
                      } else {
                        return null;
                      }
                    })
                    }
                  </View>
                ) : <Text style={styles.flexItemVaule}>--</Text>
                }
              </View>
              <View style={styles.flexContent}>
                <Text style={styles.flexItemTexe}>申请备注</Text>
                {listData && listData.remark ? (
                  <TouchableOpacity style={styles.flexItemBck} onPress={() => { this.setState({ modalVisibles: true }) }}>
                    <Text style={styles.flexItemTitle} >
                      {listData.remark ? (listData.remark.length > 28 ? (listData.remark.substr(0, 29) + '...') : listData.remark) : '--'}
                    </Text>
                  </TouchableOpacity>
                ) : <Text style={styles.flexItemVaule} > -- </Text>
                }
              </View>
            </View>
            <View>
              {
                listDatas && listDatas.map((item, index) => {
                  return <View key={index}>{this._renderListItem(item, listDatas)}</View>
                })
              }
              {
                this.totalPage > 1 ? <Text style={styles.more} onPress={() => {
                  this.props.navigation.navigate('ApproveApplyListPage', {
                    paymentApplyId: this.params.paymentApplyId,
                    paymentApplySource: this.params.paymentApplySource
                  })
                }}>查看更多 >></Text> : null
              }


              {/* <FlatList
                data={listDatas}
                style={{ marginLeft: 0 * scale, marginRight: 0 * scale }}
                renderItem={this._renderListItem}
                refreshing={refreshIcon}
                onRefresh={() => { this.refresh() }}
                onEndReachedThreshold={0.1}
                onEndReached={() => { this.loadMore() }}
              /> */}
            </View>
          </ScrollView>
        ) : tabIndex == 1 && status == 'data' || tabIndex == 2 && status == 'data' ? (
          <ScrollView style={{ flex: 1 }}>
            <View style={styles.echarts}>
              <Text style={styles.wenText}>{tabIndex == 1 ? '产品组金额占比' : tabIndex == 2 ? '产品线金额占比' : '--'}</Text>
              <View style={{ width: 375 * scale, paddingLeft: 35 * scale }}>
                <Echarts height={205 * scale} width={300 * scale} option={this._getEcharts(listDatass.applyStatsList)} />
              </View>
            </View>
            <View >
              <View style={styles.flexMoney}>
                <Text style={styles.flexMoneyName}>金额 {listDatass.currencyName ? `(${listDatass.currencyName})` : '元'}</Text>
              </View>
              {listDatass && listDatass.applyStatsList && listDatass.applyStatsList.map((item, index) => {
                return (
                  <View style={styles.flexProduce} key={index}>
                    <View style={{ flexDirection: 'row' }}>
                      <Text style={[styles.flexProduceBg, { backgroundColor: bgColor[index], borderColor: bgColor[index], }]}></Text>
                      <Text style={styles.flexProduceName}>{item.name || '--'}</Text>
                    </View>
                    <Text style={styles.flexProduceMoney}>{(item.value || 0).toFixed(2)}</Text>
                  </View>
                )
              })}
              <View style={styles.flexNum}>
                <Text style={styles.flexNumName}>合计</Text>
                <Text style={styles.flexNumVaule}>{(listDatass.applyTotalAmount || 0).toFixed(2)}</Text>
              </View>
            </View>
          </ScrollView>
        ) : null
        }
        {/* <FlatList
              data={listDatass}
              style={{ marginLeft: 0 * scale, marginRight: 0 * scale }}
              renderItem={this._renderItemData}
            /> */}
        {
          status != 'data' ? (<PageStatusIndex status={status} emptyText={'暂无数据'} onErrorPress={this._onErrorRefresh} />) : null
        }
        {this._renderApprove()}
        {/* 审批流 */}
        <ProgressModal {...lightBoxData} />
        <ModalPicDelComponent {...modalPicDelCfg} />
        <CommonDialog modalVisible={modalVisibles} title={'申请备注'} renderCustom={this._renderToastWrap} onClosePress={() => { this.setState({ modalVisibles: false }) }} />
        <RefuseModal
          titleText={'审批意见'}
          placeholderText={this.auditResult ? '请输入同意原因' : null}
          propsDefaultValue={this.auditResult ? '审批同意' : '审批驳回'}
          visible={showRejectModal}
          btnPress={(text) => {
            this.remark = text;
            this.approve();
          }}
          bgPress={() => {
            this.setState({
              showRejectModal: false,
            });
          }} />
      </View>
    )

  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: style.color.white,
    paddingBottom: 30 * scale
  },
  flexBusiness: {
    flexDirection: 'row',
    paddingTop: 10 * scale,
    backgroundColor: style.color.themeColor,
    paddingLeft: 28 * scale,
  },
  flexBusinessName: {
    fontSize: 12 * scale,
    color: '#ffffff',
  },
  flexBusinessText: {
    // flexDirection: 'row',
    width: 260 * scale,
    // paddingRight: 20 * scale,
    fontSize: 12 * scale,
    color: '#ffffff',
  },
  flexBox: {
    flexDirection: 'row',
    paddingTop: 10 * scale,
    justifyContent: 'space-between',
    backgroundColor: style.color.themeColor,
    paddingLeft: 28 * scale,
    paddingRight: 35 * scale,
  },
  flexTitle: {
    fontSize: 12 * scale,
    color: '#ffffff',
  },
  flexApply: {
    flexDirection: 'row',
    paddingTop: 10 * scale,
    justifyContent: 'space-between',
    backgroundColor: style.color.themeColor,
    paddingLeft: 28 * scale,
    paddingRight: 60 * scale,
  },
  flexAccount: {
    paddingBottom: 25 * scale,
  },
  headBox: {
    // backgroundColor: style.color.themeColor,
    marginTop: -15 * scale,
    // height: 50 * scale,
    borderTopLeftRadius: 10 * scale,
    borderTopRightRadius: 10 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: '#fff',
    backgroundColor: '#fff',
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    // paddingLeft: 60 * scale,
    // paddingRight: 60 * scale,
    // height: 600 * scale,
  },
  tabItems: {
    color: '#0E7FFD',
    fontSize: 12 * scale,
    // width: '35%',
    textAlign: 'center',
    marginTop: 20 * scale,
    opacity: .8,
    paddingRight: 5 * scale,
    paddingLeft: 5 * scale,
    paddingBottom: 5 * scale,
  },
  tabItemActive: {
    opacity: 1,
  },
  flexItem: {
    // flexDirection: 'row',
    paddingLeft: 30 * scale,
    paddingRight: 19 * scale,
    paddingTop: 20 * scale,
  },
  flexContent: {
    flexDirection: 'row',
    paddingBottom: 12 * scale,
  },
  flexContentText: {
    flexDirection: 'row',
    paddingBottom: 12 * scale,
  },
  flexItemTexe: {
    flexDirection: 'row',
    width: 120 * scale,
    fontSize: 12 * scale,
    color: '#000000',
    opacity: 0.7,
  },
  flexItemFid: {
    flexDirection: 'row',
    width: 220 * scale,
    flexWrap: 'wrap',
  },
  flexItemVaule: {
    flexDirection: 'row',
    width: 205 * scale,
    fontSize: 12 * scale,
    color: '#000000',
  },
  flexItemExt: {
    paddingRight: 15 * scale,
    fontSize: 12 * scale,
    color: '#000000',
    paddingBottom: 10 * scale,
  },
  flexItemBck: {
    flexDirection: 'row',
    width: 205 * scale,
  },
  flexItemTitle: {
    fontSize: 12 * scale,
    color: '#0091FF',
  },
  flexList: {
    // flexDirection: 'row',
    marginLeft: 10 * scale,
    marginRight: 12 * scale,
    marginTop: 14 * scale,
    borderRadius: 5 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.bgGray,
    backgroundColor: style.color.bgGray,
  },
  flexListItem: {
    flexDirection: 'row',
    paddingRight: 5 * scale,
    paddingLeft: 18 * scale,
    paddingTop: 9 * scale,
    paddingBottom: 14 * scale,
  },
  flexListItemName: {
    fontSize: 12 * scale,
    color: '#000000'
  },
  flexMeber: {
    marginLeft: 11 * scale,
    fontSize: 12 * scale,
    color: '#000',
  },
  flexListApply: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    // justifyContent: 'space-around',
    // position: 'relative',
    // marginBottom: 15 * scale,
    paddingLeft: 18 * scale,
    paddingRight: 8 * scale,
  },
  flexListApplyText: {
    flexDirection: 'row',
    width: 107 * scale,
    fontSize: 12 * scale,
    paddingRight: 6 * scale,
    color: '#000',
  },
  flexListApplyMenber: {
    flexDirection: 'row',
    width: 107 * scale,
    paddingRight: 6 * scale,
    fontSize: 12 * scale,
    paddingBottom: 15 * scale,
  },
  flexApplyMenbers: {
    flexDirection: 'row',
    width: 107 * scale,
    fontSize: 12 * scale,
    paddingBottom: 15 * scale,
  },
  flexListApplyVaule: {
    color: '#E02020',
  },
  flexListApplyType: {
    color: '#000',
  },
  flexListApplyNum: {
    color: '#0091FF'
  },
  flexWhole: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingTop: 20 * scale,
    paddingLeft: 20 * scale,
    // paddingBottom: 20 * scale,
    backgroundColor: style.color.white,
  },
  flexWholeName: {
    justifyContent: 'flex-start',
    flex: 1,
    flexDirection: 'row',
    paddingLeft: 18 * scale,
  },
  flexWholeTitle: {
    color: style.color.themeColor
  },
  itemDayTime: {
    justifyContent: 'flex-end',
    flex: 1,
    flexDirection: 'row'
  },
  consent: {
    paddingRight: 20 * scale,
    paddingLeft: 20 * scale,
    paddingTop: 8 * scale,
    paddingBottom: 8 * scale,
    fontSize: 12 * scale,
    opacity: 1,
    color: '#ffffff',
    alignItems: 'center',
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.themeColor,
    borderRadius: 15 * scale,
    // marginRight: 0 * scale,
    flexDirection: 'row',
    backgroundColor: style.color.themeColor,
    overflow: 'hidden'
  },
  itemdown: {
    fontSize: 12 * scale,
    color: style.color.themeColor,
    alignItems: 'center',
    paddingRight: 20 * scale,
    paddingLeft: 20 * scale,
    paddingTop: 8 * scale,
    paddingBottom: 8 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.themeColor,
    borderRadius: 15 * scale,
    marginRight: 20 * scale,
    flexDirection: 'row',
    marginLeft: 10 * scale,
  },
  echarts: {
    width: 375 * scale,
    // height: 400 * scale,
    // flex: 1,
    position: 'relative'
  },
  wenText: {
    // flexDirection: 'row',
    fontSize: 12 * scale,
    color: '#000',
    position: 'absolute',
    left: 162 * scale,
    top: 90 * scale,
    zIndex: 999,
    width: 56 * scale,
  },
  flexMoney: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingRight: 28 * scale,
  },
  flexMoneyName: {
    color: '#2A3E51',
    fontSize: 12 * scale,
  },
  flexProduce: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingRight: 30 * scale,
    paddingLeft: 30 * scale,
    paddingTop: 16 * scale,
  },
  flexProduceBg: {
    flexDirection: 'row',
    width: 18,
    height: 10 * scale,
    marginTop: 2 * scale,
    justifyContent: 'flex-start',
    // backgroundColor: '#FF777A',
    borderRadius: 5 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    // borderColor: '#FF777A',
    overflow: 'hidden',
  },
  flexProduceName: {
    flexDirection: 'row',
    justifyContent: 'flex-start',

    width: 210 * scale,
    fontSize: 12 * scale,
    color: '#031B31',
    marginLeft: 5 * scale,
    opacity: 0.7,
  },
  flexProduceMoney: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    fontSize: 12 * scale,
    color: '#2A3E51',
  },
  flexNum: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 12 * scale,
    paddingRight: 30 * scale,
    paddingLeft: 30 * scale,
  },
  flexNumName: {
    color: '#031B31',
    fontSize: 12 * scale,
    opacity: 0.8,
    paddingLeft: 46 * scale,
  },
  flexNumVaule: {
    color: '#2A3E51',
    fontSize: 12 * scale,
  },
  more: {
    paddingHorizontal: 10 * scale,
    paddingVertical: 10 * scale,
    color: style.color.themeColor,
    flex: 1,
    textAlign: 'center'
  }
})